Alpha Anywhere 4.3 Videos

 

This is a list of vidoes published for Alpha Anywhere 4.3 through Alpha Anywhere 4.3.2.

Alpha Anywhere 4.3

Category Title Description
UX Component - FormView Control Capturing Signatures using the SignatureInk Editor A common requirement when using the FormView control is capturing a signature. Alpha Anywhere has a Signature control, but this control captures signatures as bitmaps and is not ideal for use in a FormView control. The Ink control is better suited for this use case.

In this video we show how a FormView control is configured to use the built-in SignatureInk editor.

Watch Video

Download Component
Date added: 2016-06-30
Node Installing a Node Module from NPM and then Creating a Node Service to Call Methods in the Node Module The Xbasic code you write in your Web applications can call methods in Node.js modules that are installed from NPM (the Node Package Manager).

In this video we show how a Node module is installed into the Web Project folder and then how a Node Service is created so that methods in the Node module can be called.

The particular Node module that we install in this video is called Tinify and we show how a Node Service is defined so that we can call into this module from Xbasic using the Node_request() function.


Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Date added: 2016-07-06
UX Component - Ink Control Customizing the Ink Control Overlay The Ink control 'overlay' displays a number of tools that are used by the Ink editor (such as the Pen selector, Eraser, etc.). You can customize the appearance of the 'overlay' and add your own tools (i.e buttons).

In this video we show how you can add a new button to the Ink editor overlay.

Watch Video


Date added: 2016-07-08
UX Component - Ink Control Setting the Ink Control Background Image Setting the background image in the Ink Control is a common practice. In this video we discuss various aspects of how you can set the Ink control image background and control whether the UX goes dirty when the Ink background is set.

Watch Video - Part 1
Watch Video - Part 2


Date added: 2016-07-06
UX Component - Ink Control Using the Ink Control to Capture Signatures The UX Component has always had a built in Signature Capture control. However, it is also possible to use the Ink control to capture signatures. The primary benefit of using the Ink control to capture signatures is that the signature is captured using the Ink format, which is an ascii format, rather than as a PNG image, which the Signature Capture control uses.

In this video we show how to configure the Ink control to capture signatures.

Watch Video


Date added: 2016-07-08
UX Component - ViewBox Using a ViewBox as the List's Detail View A common pattern when building mobile applications is to use a List control with a Detail View. When the user taps on a row in the List, the Detail View shows the details for the selected row. This pattern is used extensively, especially for offline applications where the data in the List is intended to be updateable.

However, there are many cases where the List is not intended to be  updateable and a much 'lighter weight' solution can be achieved but not turning on the List's 'Has Detail View property' and instead, using a ViewBox to display details for the selected row in the List.

An even lighter weight solution can be achieved by using a ViewBox to replace the List. So you end up with a ViewBox to display a list of records and another ViewBox to display details for the selected record.

Watch Video - Part 1
Watch Video - Part 2

Download Component

Date added: 2016-07-09
UX Control Building a Custom Image Gallery using the List and Ink Control The List and Ink Control can be used to build a custom Image Gallery in which the List is used to display thumbnails of the available images and when the user taps on a particular image, the full size image is shown in the Ink control. The advantage of using the Ink control to display the image is so that you can take advantage of the Ink controls pinch-zoom features and pan features to scale the image and to pan around to see details of different parts of the image. The ability to actually draw ink (which of course is the primary purpose of the Ink control) is not used in this case.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Download Component

Date added: 2016-07-16
UX Component - List Control Options for Handling Write Conflicts when Syncing Data When you build a disconnected mobile application, there is always a chance that the user will get a write conflict when they sync data that was edited while they were offline. This could  happen because some other user has committed a change to a record before another user could commit their change.

By default, when a write conflict occurs, the information about the conflict is sent to the user and the user can resolve the conflict by selecting 'Their value' or 'My value'. However, there are other powerful programmatic options for handling write conflicts. In this video we discuss the various techniques for handling write conflicts.

Watch Video - Part 1
Watch Video - Part 2


Date added: 2016-07-21
Grid Component Preventing User from Closing Pop-up Window if Grid or a Linked Child Grid is Dirty It is common in web applications to have buttons that open a Grid component in a pop-up window. The Action Javascript builder when you build this action has a built-in property that allows you to prevent the user from closing the window if the Grid shown in the window is dirty. But what if the Grid shown in the window has Linked child Grid components? You might want to also check that the child Grids are not dirty before the window can be closed.

In this video we show how this can be done.

Watch Video

Date added: 2016-08-04
UX Component - FormView Control Creating Complex Form Layouts using the Flow and Column Layout Containers When you lay out a Form using the FormView control, by default, the controls on the form are rendered with one control per line and each control taking up the full width of the FormView control. If you want to create a more complex Layout you can either switch from Genie mode to the Freeform mode, or you can use Flow and Column Layout Containers to control the layout of your Form.

In this video we show how a complex Form layout is achieved using Column and Flow layout containers.

Watch Video - Part 1
Watch Video - Part 2

Download Component

Date added: 2016-08-27
UX Component Adjusting Colors and Fonts in a Stylesheet Alpha Anywhere has always allowed you to edit a stylesheet used by a component to change any of the CSS defined in the stylesheet. But when you simply want to change some colors in a stylesheet, using the style editor may be more than you need.

In this video we show how you can easily adjust colors and fonts in a style.

NOTE: This option is only available for 'new' styles (AndroidLight, AndroidDark, iOS7, Alpha) as these styles are based on SASS.

Watch Video

Date added: 2016-09-14
UX Component - ControlBar Control Introduction to Basic Concepts This video demonstrates basic concepts of the ControlBar control.

Watch Video - Part 1
Watch Video - Part 2

Date added: 2016-09-14
UX Component - ControlBar Control Updating ControlBar Data - Dynamic Text This video demonstrates how you can update the data in the ControlBar's data. This allows you to put dynamic text in the Controlbar. We also show how the ControlBar can be animated when it is refreshed.

Watch Video - Part 1
Watch Video - Part 2


Date added: 2016-09-14
UX Component - ControlBar Control Using Watch Events to Update ControlBar Data The ControlBar data can be updated automatically in response to certain events in the UX (such as the UX going dirty, a List going dirty, etc.) or by a change in the value of one or more controls.

In this video we show how you can configure watch events to automatically update ControlBar data.


Watch Video

Date added: 2016-09-14
UX Component - ControlBarControl Adding a Button to a ControlBar In this video we show how you can add a button to a ControlBar and then associate an action (i.e. some Javascript code) to run when the button is tapped.

Watch Video
Download Component

Date added: 2016-09-14
UX Component - ControlBarControl Adding a Button-Toggle to a ControlBar In this video we show how you can add a Button-Toggle to a ControlBar. Toggle buttons can either be two-state (switching between a true and a false state), or multi-state (each click advances to the next button state).

The video shows how the state of a Button-Toggle is used to control what action a button performs when clicked.

Watch Video
Download Component

Date added: 2016-09-14
UX Component - ControlBarControl Adding a Button-List to a ControlBar A common pattern in mobile apps is to have a button bar at the bottom of the screen with a series of buttons that allow you to select the active Panel that is shown on the device. Typically, these buttons are spread out so that they fill the width of the screen.
The button-list control is ideal for implementing this pattern.

In this video we show how a Button-List can be configured to fill the width of the screen and to select a Panel Card in a Panel Layout when one of the buttons in the Button-List is tapped.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3


Download Component

Date added: 2016-09-14
UX Component - ControlBar Control Selecting the Active ControlBar Layout A ControlBar can have multiple Layouts. In this video we show how you can dynamically select the Layout to show.

Watch Video - Part 1
Watch Video - Part 2


Download Component

Date added: 2016-09-14
UX Component - ControlBar Control Showing a Disclosure A disclosure can be some explicitly defined HTML, or it can be another Layout. In this video we show how a disclosure, defined as a ControlBar layout, is shown.

Watch Video
Download Component

Addendum: One of the more unusual disclosure types is Outside-After (and Outside-Before) which display the disclosure perpendicular to the parent Layout. In this video we show how the disclosure is rendered when the Outside-After type is selected.

Watch Video - Part 2

Date added: 2016-09-14
UX Component - ControlBar Control Showing a List in a Disclosure You can display standard UX controls (such as Lists, Buttons, Input controls, etc.) in a disclosure. In this video we show how a list is displayed in a disclosure.

Watch Video - Part 1
Watch Video - Part 2


Download Component

Date added: 2016-09-16
UX Component - ControlBar Control Setting the Selected Button in a Button List using Javascript The selected button(s) in a ControlBar Button List can be set programmatically using Javascript. It is also possible to completely change the buttons shown in a Button List programmatically.

In this video we show how this is done.

Watch Video

Download Component

Date added: 2016-09-21
UX Component Google Address Auto-complete A commonly seen feature in many web and mobile applications is address auto-complete. As the user starts typing an address into a textbox, a list of suggested address is shown and the user can select from the list. This feature is powered by Google Maps.

In this video we show how you can turn on the Address Suggest feature for any textbox control on a UX.

NOTE: Textbox controls in Repeating Sections are not supported.

Watch Video - Part 1
Watch Video - Part 2


Date added: 2016-09-16
UX Component - ControlBar Control Defining Javascript in a ControlBar - Understanding the 'This Object' Option. Using Javascript function in a template. When you define Javascript functions in a ControlBar (and also a ViewBox and FormView control), you can specify where the Javascript should be stored. The options are: At the control level, at the UX level and 'This object'.

This video explains the options and discusses why the 'This object' option is best. It also describes how functions defined at the 'This object' level can be referenced in templates.


Watch Video
Download Component

Date added: 2016-09-28
UX Component - ControlBar Control Dynamically Showing and Hiding Lines in a ControlBar Layout A ControlBar layout can have multiple Lines. Each Line in a Layout can be dynamically shown or hidden.

This video shows how a show expression can be defined for a Line in a ControlBar Layout


Watch Video
Download Component

Date added: 2016-09-28
UX and Grid Component Sending SMS Messages using the Twilio Service You can send SMS messages from the Grid and the UX. The messages are sent using the Twilio service, so you will need a Twilio account. You can use Action Javascript to define the action which sends the message.

There are a large number of options for customizing the message, such as sending messages in different languages, depending on the user preference.

In this video we show how a button was defined in the UX to send a message. The phone number and message body are read from controls on the UX.

Watch Video

Date added: 2016-09-29
UX Component Creating Offline HTML5 Applications using the Application Cache The Application Cache (an HTML5 feature widely supported by various browsers) allows you to build 'offline' applications - i.e. applications that can be loaded into the browser even if there is no internet connection. In order to load the application initially an internet connection is obviously needed. But once the application has been loaded initially, all of the files (e.g. CSS.Javascript, images, etc.) referenced by the application are cached in the browser and an internet connection is not needed to load the application subsequently.

If the application is updated, then if an internet connection is available when the app is loaded, the new version of the app is downloaded and cached in the browser.

In this video we show how offline HTML5 applications can be created using the Application Cache feature.

NOTE: These 'offline' HTML5 applications do not require PhoneGap!

Watch Video - Part 1
Watch Video - Part 2

Date added: 2016-09-29
UX Component - List Control Saving and Restoring List Settings to Quickly Define New Lists The List control is one of the most commonly used controls in a UX component. But because of the richness of the List, there can be many properties that need to be set to configure a List. After you have configured a List, you can save all of the settings for the List in a named file. Then when you define your next List, you can restore the settings from the named file - saving a lot of time.

This video demonstrates how List settings can be saved and restored.

Watch Video

Date added: 2016-109-02
UX and Grid Component Using the Javascript Code Library The Javascript Code Library is available in all contexts where Javascript can be edited. The Code Library is ideal for storing snippets of code that can then be pasted into the Javascript you are editing.

In this video we walk through the various features of the Javascript Code Library.

Watch Video

Date added: 2016-109-05
UX Component - ControlBar Control Adding an Edit ControlBar Item to a ControlBar A ControlBar typically contains text and buttons, but a common use case is to build a Search ControlBar that uses an edit control in the ControlBar.

In this video we show how the edit ControlBar item type can be used to build a Search feature.


Watch Video
Download Component

Date added: 2016-10-08
UX Component - ControlBar Control Displaying a Modal Pop-up Form using a Disclosure A common pattern in many applications (both Mobile and Desktop web) is to display pop-up modal forms to collect some information from the user. Displaying pop-up modal forms using the ControlBar is very easy and extremely powerful.

This video shows how a ControlBar 'disclosure' is used to display a pop-up modal form. The 'a5-action' attribute in the Disclosure HTML is used to invoke actions defined in the ControlBar's Action pane.


Watch Video - Part 1
Watch Video - Part 2

Download Component

Date added: 2016-10-08
UX Component - FormView Control Displaying Calculated Values on a FormView Control When you design a FormView control you may want the form to display calculated values (typically computed from other fields in the form). Since the Form is really just an HTML template that is rendered using Alpha Anywhere's client-side templating features, this is easily done.

In this video we show how a calculated field is added to the FormView control.

Watch Video
Download Component

Date added: 2016-10-10

Alpha Anywhere 4.3.1

Category Title Description
UX Component - Ink Control Image Annotation using the Ink Control in a Data Bound UX Component The ink control allows you to create sketches by 'drawing' with your mouse, any type of pointing device, or with your finger (on a device that supports touch). A common use of the ink control is to annotate images. The image you want to annotate is shown as the background to the ink control and then you can draw 'on top of' the image. When the data are saved the ink is stored separately from the image in a long text field.

In this video we show how a data bound UX component that allows a user to upload images can be configured to allow the user to annotate the images that are uploaded.


Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4

Download Component
Download SQL Table Definition

Date added: 2016-10-30
UX Component - ControlBar Control Defining Disclosure Forms using the Disclosure Form Builder In the video 'Displaying a Modal Pop-up Form using a Disclosure' we show how a modal pop-up form can be displayed using a Disclosure. The definition of the HTML for the form is fairly tedious because it is completely hand coded.

In this video we show how the Disclosure Form Builder can be used to make it easier to define the form HTML.


Watch Video - Part 1
Watch Video - Part 2

Download Component

Date added: 2016-10-30
UX Component ControlBar Control Display Modal Message Dialogs using Disclosures Modal messages (such as confirmations, progress, feedback) as commonly used when designing the user interface for an application. ControlBar disclosures make displaying these messages particularly easy.

In this video we show how the ControlBar can be configured to display three different types of message dialogs: basic information dialogs (one button), confirmation dialogs (two buttons) and wait dialogs (no buttons).

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Download Component

Date added: 2016-10-30
UX Component - List Control Specifying Sort Criteria when Filtering a List Action Javascript allows you to easily define fields on a UX where the user can specify search criteria for a List control on the UX ( much like the Search Part in a Grid). Now you can also define sort criteria.

In this video we show how the Filter Records in a List action in Action Javascript can be configured to allow sort criteria to be specified.

Watch Video

Download Component

Date added: 2016-1-03
UX Component - ControlBar Control Adding List Navigation Buttons to a ControlBar When you define a List control, you can specify that the List should be paginated. If you set the pagination method to 'Navigation Buttons' then you must define buttons to move to the next and previous page of records. In a mobile application that uses a ControlBar in a Panel header or footer, it is desirable to place these navigation buttons in the ControlBar.

In this video we show how you can quickly add List navigation buttons to a ControlBar by selecting the 'Pre-defined buttons' option when adding ControlBar items to your ControlBar definition.

Watch Video

Date added: 2016-11-05
UX Component - FormView Control Using a FormView Control to Edit Data in a List Control - Master-Detail Forms - Very Large Forms By default, when you configure a List with a Detail View (so that edits can be made to the List data), the Detail View is composed using individual controls (e.g. Textbox, Textarea, Dropdown, etc). If the Detail View has a large number of fields, then composing the Detail View using individual controls will be inefficient and will result is a very large UX component that may not perform well.

An alternative approach is to use the FormView control to implement the List's Detail View. This is extremely efficient and will allow you to build UX components that edit very large forms but still perform very well.

In this video we show how a master-detail Form is built using a FormView control to edit the fields in the Master table and a second FormView control to edit the fields in the Detail Table. The master table has 100 fields and the detail table has 100 fields, so in total, the UX component is editing 200 fields.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4

Download Component

Download Script to Create SQL Tables

Date added: 2016-11-08
UX Component - FormView Control Tutorial - Building a Mobile Master-Detail Form using The List, FormView and ControlBar Controls - In this video tutorial we show how a mobile app can be built to implement a master-detail form using the FormView control. The app will allow users to edit data from the Customers and Orders table in the sample Northwind database. This is a classic master-detail form: Each customer has multiple orders. The UX component uses two Lists joined in a parent-child relationship. The parent List displays data from the Customer table and the child List display the related orders from the Orders table.

Each List has a Detail View, but in both cases, the Detail View is implemented using the FormView control.

Once the basic functionality of the app has been built, the app is 'mobilized' by wrapping the various sections of the component in PanelCards and a ControlBar is added to implement navigation between the various parts of the application.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
Watch Video - Part 5
Watch Video - Part 6
Watch Video - Part 7
Watch Video - Part 8
Watch Video - Part 9
Watch Video - Part 10

Download Components

Date added: 2016-11-10

Alpha Anywhere 4.3.2

Category Title Description
UX Component - Ink Control Image Annotation using the Ink Control in a Data Bound UX Component The ink control allows you to create sketches by 'drawing' with your mouse, any type of pointing device, or with your finger (on a device that supports touch). A common use of the ink control is to annotate images. The image you want to annotate is shown as the background to the ink control and then you can draw 'on top of' the image. When the data are saved the ink is stored separately from the image in a long text field.

In this video we show how a data bound UX component that allows a user to upload images can be configured to allow the user to annotate the images that are uploaded.


Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4

Download Component
Download SQL Table Definition

Date added: 2016-10-30
UX Component - ControlBar Control Defining Disclosure Forms using the Disclosure Form Builder In the video 'Displaying a Modal Pop-up Form using a Disclosure' we show how a modal pop-up form can be displayed using a Disclosure. The definition of the HTML for the form is fairly tedious because it is completely hand coded.

In this video we show how the Disclosure Form Builder can be used to make it easier to define the form HTML.


Watch Video - Part 1
Watch Video - Part 2

Download Component

Date added: 2016-10-30
UX Component ControlBar Control Display Modal Message Dialogs using Disclosures Modal messages (such as confirmations, progress, feedback) as commonly used when designing the user interface for an application. ControlBar disclosures make displaying these messages particularly easy.

In this video we show how the ControlBar can be configured to display three different types of message dialogs: basic information dialogs (one button), confirmation dialogs (two buttons) and wait dialogs (no buttons).

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Download Component

Date added: 2016-10-30
UX Component - List Control Specifying Sort Criteria when Filtering a List Action Javascript allows you to easily define fields on a UX where the user can specify search criteria for a List control on the UX ( much like the Search Part in a Grid). Now you can also define sort criteria.

In this video we show how the Filter Records in a List action in Action Javascript can be configured to allow sort criteria to be specified.

Watch Video

Download Component

Date added: 2016-1-03
UX Component - ControlBar Control Adding List Navigation Buttons to a ControlBar When you define a List control, you can specify that the List should be paginated. If you set the pagination method to 'Navigation Buttons' then you must define buttons to move to the next and previous page of records. In a mobile application that uses a ControlBar in a Panel header or footer, it is desirable to place these navigation buttons in the ControlBar.

In this video we show how you can quickly add List navigation buttons to a ControlBar by selecting the 'Pre-defined buttons' option when adding ControlBar items to your ControlBar definition.

Watch Video

Date added: 2016-11-05
UX Component - FormView Control Using a FormView Control to Edit Data in a List Control - Master-Detail Forms - Very Large Forms By default, when you configure a List with a Detail View (so that edits can be made to the List data), the Detail View is composed using individual controls (e.g. Textbox, Textarea, Dropdown, etc). If the Detail View has a large number of fields, then composing the Detail View using individual controls will be inefficient and will result is a very large UX component that may not perform well.

An alternative approach is to use the FormView control to implement the List's Detail View. This is extremely efficient and will allow you to build UX components that edit very large forms but still perform very well.

In this video we show how a master-detail Form is built using a FormView control to edit the fields in the Master table and a second FormView control to edit the fields in the Detail Table. The master table has 100 fields and the detail table has 100 fields, so in total, the UX component is editing 200 fields.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4

Download Component

Download Script to Create SQL Tables

Date added: 2016-11-08
UX Component - FormView Control Tutorial - Building a Mobile Master-Detail Form using The List, FormView and ControlBar Controls - In this video tutorial we show how a mobile app can be built to implement a master-detail form using the FormView control. The app will allow users to edit data from the Customers and Orders table in the sample Northwind database. This is a classic master-detail form: Each customer has multiple orders. The UX component uses two Lists joined in a parent-child relationship. The parent List displays data from the Customer table and the child List display the related orders from the Orders table.

Each List has a Detail View, but in both cases, the Detail View is implemented using the FormView control.

Once the basic functionality of the app has been built, the app is 'mobilized' by wrapping the various sections of the component in PanelCards and a ControlBar is added to implement navigation between the various parts of the application.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
Watch Video - Part 5
Watch Video - Part 6
Watch Video - Part 7
Watch Video - Part 8
Watch Video - Part 9
Watch Video - Part 10

Download Components

Date added: 2016-11-10
UX Component Displaying a Custom Wait Message while a Large Mobile App is Loading in the Background If you have built a very large mobile App which takes some time to load, you might want to display a custom wait message to the user while the main UX component of your App is loaded in the background.

In this video we show how this can be done using a simple 'startup' UX component.

Watch Video

Download Components

Date added: 2016-12-11
UX Component - PhoneGap PhoneGap - Using the PhoneGap - Open File with Native Application Action to View PDF Files in a Mobile Application The PhoneGap cordova-open plugin allows you to open various file types using the associated native app on a mobile device. For example, if you open a .pdf file, the PDF file is displayed using the native PDF viewer app on the mobile device. If you open a .mp4 file, the video is displayed using the native video viewer on the device. A common use case for this plugin is to download several files when a connection is available so that the files can then be viewer later on when no connection is available.

In this video we show how an application is built that shows a list of PDF files. These files are downloaded from the server and stored in the filesystem on a mobile device. Then we show how each of the downloaded files can be viewed using the PDF viewer on the mobile device. Because the PDF files are stored in the filesystem on the device, they can be viewed even if the device no longer has a connection. The application uses the 'PhoneGap - Open File with Native Application' action to display the .pdf file.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Date added: 2016-12-27
UX Component - PhoneGap PhoneGap- Viewing Reports in PDF Format on a Mobile Device The PhoneGap cordova-open plugin allows you to open files (such as .pdf files) using the natvie application associated with that file type on a mobile device. This plugin is particularly useful for viewing PDF files. The Alpha Anywhere report writer can save reports as PDF files. The cordova-open plugin therefore fits really well with the Alpha Anywhere report writer because you can build applications that generate reports as PDF files and then display the reports on a mobile device using the cordova-open plugin.

In this video we show how you can use Action Javascript (the  'PhoneGap - Open File with Native Application' action) to generate a PDF file from an Alpha Anywhere report, then download the resulting PDF file to a mobile device and display it using the native PDF viewer.


Watch Video - Part 1
Watch Video - Part 2

Date added: 2016-12-27